<template>
	<view>
		<c-base-page :current="0" :showNavbar="false" :isShowBack="false">
			<view class="page-index">
				<view class="switch-titles">
					<view class="item" :class="type === 1 ? 'actived' : ''" @click="switchType(1)">电站</view>
					<view class="item" :class="type === 2 ? 'actived' : ''" @click="switchType(2)">统计</view>
				</view>
				<template v-if="type === 1">
					<view class="state-cards">
						<view class="item" :class="curStatus === 0 ? 'actived' : ''" @click="switchStatus(0)">
							<view class="image">
								<uni-icons type="bars" color="#00a797"></uni-icons>
							</view>
							<view class="count">{{ statisticsItem.total_stations }}</view>
							<view class="title">{{ status[0] }}</view>
						</view>
						<view class="item" :class="curStatus === 3 ? 'actived' : ''" @click="switchStatus(3)">
							<view class="image">
								<uni-icons type="star-filled" color="#55aa00"></uni-icons>
							</view>
							<view class="count">{{ statisticsItem.normal_stations }}</view>
							<view class="title">{{ status[3] }}</view>
						</view>
						<view class="item" :class="curStatus === 2 ? 'actived' : ''" @click="switchStatus(2)">
							<view class="image">
								<uni-icons type="fire-filled" color="#ff9337"></uni-icons>
							</view>
							<view class="count">{{ statisticsItem.fault_stations }}</view>
							<view class="title">{{ status[2] }}</view>
						</view>
						<view class="item" :class="curStatus === 1 ? 'actived' : ''" @click="switchStatus(1)">
							<view class="image">
								<uni-icons type="link" color="#838383"></uni-icons>
							</view>
							<view class="count">{{ statisticsItem.disconnect_stations }}</view>
							<view class="title">{{ status[1] }}</view>
						</view>
					</view>
					<view class="power-stations">
						<!--<view class="searchs">
							<view class="search-inputs">
								<view class="state">全部</view>
								<uni-icons type="bottom"></uni-icons>
								<input type="text" value="" placeholder="请输入电站名称" />
							</view>
							<view class="search-btn">查询</view>
						</view>-->
						<view class="contents" v-for="(item, index) in stations" :key="item.plantCode" @click="toDetail(item)">
							<view class="titles">
								<view class="title">{{ item.plantName || "" }}</view>
								<template v-if="item.realKpi">
									<view class="state success" v-if="item.realKpi.real_health_state === 3">{{ status[3] }}</view>
									<view class="state warning" v-if="item.realKpi.real_health_state === 2">{{ status[2] }}</view>
									<view class="state info" v-if="item.realKpi.real_health_state === 1">{{ status[1] }}</view>
								</template>
							</view>
							<view class="address">{{ item.plantAddress }}</view>
							<view class="electricitys" v-if="item.realKpi">
								<view class="item">
									<view class="desc">当日收益</view>
									<view class="value">
										{{ item.dayIncome.number }}
										<text class="desc">{{ item.dayIncome.unit }}</text>
									</view>
								</view>
								<view class="item">
									<view class="desc">当日发电量</view>
									<view class="value">
										{{ item.dayPower.number }}
										<text class="desc">{{ item.dayPower.unit }}</text>
									</view>
								</view>
								<view class="item">
									<view class="desc">累计发电量</view>
									<view class="value">
										{{ item.totalPower.number }}
										<text class="desc">{{ item.totalPower.unit }}</text>
									</view>
								</view>
							</view>
						</view>
						<view class="nodata" v-if="stations.length <= 0">~暂无数据~</view>
					</view>
				</template>
				<template v-if="type === 2">
					<view class="statistics">
						<view class="item">
							<view class="infos">
								<view class="title">当日收益</view>
								<view class="image b1"></view>
							</view>
							<view class="desc">
								<text class="value">{{ statisticsItem.dayIncome.number }}</text>
								<text class="unit">{{ statisticsItem.dayIncome.unit }}</text>
							</view>
						</view>
						<view class="item">
							<view class="infos">
								<view class="title">总收益</view>
								<view class="image b2"></view>
							</view>
							<view class="desc">
								<text class="value">{{ statisticsItem.totalIncome.number }}</text>
								<text class="unit">{{ statisticsItem.totalIncome.unit }}</text>
							</view>
						</view>
						<view class="item">
							<view class="infos">
								<view class="title">当日发电量</view>
								<view class="image b3"></view>
							</view>
							<view class="desc">
								<text class="value">{{ statisticsItem.dayPower.number }}</text>
								<text class="unit">{{ statisticsItem.dayPower.unit }}</text>
							</view>
						</view>
						<view class="item">
							<view class="infos">
								<view class="title">当月发电量</view>
								<view class="image b4"></view>
							</view>
							<view class="desc">
								<text class="value">{{ statisticsItem.monthPower.number }}</text>
								<text class="unit">{{ statisticsItem.monthPower.unit }}</text>
							</view>
						</view>
						<view class="item maxitem">
							<view class="infos">
								<view class="title">累计发电量</view>
								<view class="image b5"></view>
							</view>
							<view class="desc">
								<text class="value">{{ statisticsItem.totalPower.number }}</text>
								<text class="unit">{{ statisticsItem.totalPower.unit }}</text>
							</view>
						</view>
					</view>
					<view class="echarts">
						<view class="titles">
							<view class="date">
								<picker mode="date" fields="month" :value="selectDate" @change="getPickerDate">
									<view>{{ selectDate }}</view>
								</picker>
								<uni-icons type="bottom"></uni-icons>
							</view>
							<view class="info">
								<!--<text class="value">5858.58</text>-->
								<text>发电量统计(度)</text>
							</view>
						</view>
						<view class="echart">
							<l-echart ref="chartRef" @finished="init"></l-echart>
						</view>
					</view>
				</template>
			</view>
		</c-base-page>
	</view>
</template>

<script>
	import moment from "moment"
	import * as echarts from '@/uni_modules/lime-echart/static/echarts.min'
	export default {
		name: "pageIndex",
		data() {
			return {
				type: 1,
				curStatus: 0,
				status: ["全部", "断连", "故障", "正常"],
				stations: [],
				statisticsItem: {},
				selectDate: "",
				option: {}
			}
		},
		onLoad() {
			this.selectDate = moment().format("YYYY-MM")
			this.getRealKpiDatas()
			this.getStations()
		},
		methods: {
			async init() {
				// chart 图表实例不能存在data里
				this.option = this.getOptions()
				let chart = await this.$refs.chartRef.init(echarts)
				this.$refs.chartRef.setOption(this.option)
				this.getDayKpiDatas()
			},
			getOptions(items) {
				let xAxisData = []
				let seriesData = []
				let startPer = 0
				if (items && items.length > 0) {
					for (let i in items) {
						let x = items[i]
						xAxisData.push(moment(x.collectTime).format("D日"))
						seriesData.push(x.dataItemMap.inverter_power)
					}
					if (items.length > 7) {
						startPer = (7 / items.length) * 100
						startPer = Math.ceil(startPer)
						startPer = 100 - startPer
					}
				}
				console.log(startPer)
				let opt = {
					tooltip: {
						trigger: 'axis',
						axisPointer: {
							type: 'shadow' 
						},
						confine: true
					},
					grid: {
						left: 0,
						right: 0,
						bottom: 0,
						top: 30,
						containLabel: true
					},
					dataZoom: [
						{
							show: true,
							type: 'inside',
							start: startPer,
							end: 100
						}
					],
					xAxis: [
						{
							type: 'category',
							axisLine: {
								lineStyle: {
									color: '#999999'
								}
							},
							axisLabel: {
								color: '#666666'
							},
							data: xAxisData
						}
					],
					yAxis: [
						{
							type: 'value',
							axisTick: { show: false },
							axisLine: {
								lineStyle: {
									color: '#999999'
								}
							},
							axisLabel: {
								color: '#666666'
							}
						}
					],
					series: [
						{
							name: '发电量(度)',
							type: 'bar',
							barMaxWidth: 16,
							label: {
								normal: {
									show: false,
									position: 'inside'
								}
							},
							data: seriesData,
						}
					]
				}
				return opt
			},
			getRealKpiDatas() {
				this.httpGet({
					url: this.$apis.apiRealKpiStatistics
				}).then(res => {
					this.statisticsItem = res
					this.statisticsItem.dayIncome = this.tranceWan(res.day_income, "元")
					this.statisticsItem.totalIncome = this.tranceWan(res.total_income, "元")
					this.statisticsItem.dayPower = this.tranceWan(res.day_power)
					this.statisticsItem.monthPower = this.tranceWan(res.month_power)
					this.statisticsItem.totalPower = this.tranceWan(res.total_power)
				})
			},
			getDayKpiDatas() {
				this.httpGet({
					url: `${this.$apis.apiStationDayKpi}?month=${this.selectDate}`
				}).then(res => {
					this.option = this.getOptions(res)
					this.$refs["chartRef"].setOption(this.option)
				})
			},
			getStations() {
				/* this.stations = [
					{
						"dnId": "302037086",
						"type": 1,
						"name": "县委党校",
						"plantAddress": "四川省绵阳市三台县潼川镇中共三台县委党校三台职业技术学校",
						"currentPower": "28.71",
						"dailyEnergy": "417.24",
						"cumulativeEnergy": "760.66",
						"dn": "NE=335558628",
						"monthEnergy": "5782.42",
						"yearEnergy": "9247.06",
						"installedCapacity": "0.0000",
						"installedCapacityUnit": "kWp",
						"runningStartTime": "2024-06-26 03:02:16",
						"stationRunningDays": 13
					},
					{
						"dnId": "301640220",
						"type": 2,
						"name": "县政务中心",
						"plantAddress": "四川省绵阳市三台县北坝镇绵阳市三台生态环境局政务大楼",
						"currentPower": "8.19",
						"dailyEnergy": "318.70",
						"cumulativeEnergy": "20449.46",
						"dn": "NE=335173152",
						"monthEnergy": "5877.80",
						"yearEnergy": "38507.83",
						"installedCapacity": "0.0000",
						"installedCapacityUnit": "kWp",
						"runningStartTime": "2024-05-16 01:27:13",
						"stationRunningDays": 54
					},
					{
						"dnId": "302010834",
						"type": 3,
						"name": "职教中心1#并网点",
						"plantAddress": "四川省绵阳市三台县潼川镇三台职业技术学校",
						"currentPower": "12.18",
						"dailyEnergy": "135.61",
						"cumulativeEnergy": "3021.74",
						"dn": "NE=335533242",
						"monthEnergy": "1889.60",
						"yearEnergy": "5785.55",
						"installedCapacity": "0.0000",
						"installedCapacityUnit": "kWp",
						"runningStartTime": "2024-06-15 01:32:19",
						"stationRunningDays": 24
					},
					{
						"dnId": "301579148",
						"type": 4,
						"name": "职教中心8#并网点",
						"plantAddress": "四川省绵阳市三台县潼川镇长青路",
						"currentPower": "60.60",
						"dailyEnergy": "873.43",
						"cumulativeEnergy": "38093.96",
						"dn": "NE=335117580",
						"monthEnergy": "11825.81",
						"yearEnergy": "61892.44",
						"installedCapacity": "273.9000",
						"installedCapacityUnit": "kWp",
						"runningStartTime": "2024-05-02 01:19:20",
						"stationRunningDays": 68
					},
					{
						"dnId": "301856046",
						"type": 1,
						"name": "孵化园1#并网点",
						"plantAddress": "四川省绵阳市三台县潼川镇三台数字经济产业园创新科技孵化园",
						"currentPower": "38.16",
						"dailyEnergy": "488.76",
						"cumulativeEnergy": "247572.54",
						"dn": "NE=335377978",
						"monthEnergy": "7676.48",
						"yearEnergy": "130708.64",
						"installedCapacity": "324.5000",
						"installedCapacityUnit": "kWp",
						"runningStartTime": "2023-01-11 11:41:42",
						"stationRunningDays": 545
					},
					{
						"dnId": "301898528",
						"type": 1,
						"name": "孵化园2#并网点",
						"plantAddress": "四川省绵阳市三台县马望路",
						"currentPower": "36.79",
						"dailyEnergy": "473.96",
						"cumulativeEnergy": "377287.82",
						"dn": "NE=335420460",
						"monthEnergy": "7471.08",
						"yearEnergy": "149291.83",
						"installedCapacity": "273.9000",
						"installedCapacityUnit": "kWp",
						"runningStartTime": "2023-03-30 09:50:40",
						"stationRunningDays": 467
					},
					{
						"dnId": "301898695",
						"type": 1,
						"name": "孵化园3#并网点",
						"plantAddress": "四川省绵阳市三台县潼川镇三台数字经济产业园创新科技孵化园",
						"currentPower": "51.33",
						"dailyEnergy": "679.94",
						"cumulativeEnergy": "399866.92",
						"dn": "NE=335420627",
						"monthEnergy": "10649.16",
						"yearEnergy": "146214.07",
						"installedCapacity": "386.1000",
						"installedCapacityUnit": "kWp",
						"runningStartTime": "2023-03-30 14:02:57",
						"stationRunningDays": 467
					},
					{
						"dnId": "301901202",
						"type": 1,
						"name": "孵化园4#并网点",
						"plantAddress": "四川省绵阳市三台县潼川镇创新科技孵化园",
						"currentPower": "51.27",
						"dailyEnergy": "674.23",
						"cumulativeEnergy": "519186.46",
						"dn": "NE=335423134",
						"monthEnergy": "10537.36",
						"yearEnergy": "198306.33",
						"installedCapacity": "382.8000",
						"installedCapacityUnit": "kWp",
						"runningStartTime": "1970-01-01 08:00:00",
						"stationRunningDays": 19913
					},
					{
						"dnId": "301898821",
						"type": 1,
						"name": "孵化园5#并网点",
						"plantAddress": "四川省绵阳市三台县潼川镇三台数字经济产业园创新科技孵化园",
						"currentPower": "36.03",
						"dailyEnergy": "475.50",
						"cumulativeEnergy": "365831.63",
						"dn": "NE=335420753",
						"monthEnergy": "7374.38",
						"yearEnergy": "138179.29",
						"installedCapacity": "276.1000",
						"installedCapacityUnit": "kWp",
						"runningStartTime": "2023-03-30 16:00:01",
						"stationRunningDays": 467
					},
					{
						"dnId": "301900957",
						"type": 1,
						"name": "孵化园6#并网点",
						"plantAddress": "四川省绵阳市三台县潼川镇三台数字经济产业园创新科技孵化园",
						"currentPower": "46.98",
						"dailyEnergy": "616.95",
						"cumulativeEnergy": "486396.12",
						"dn": "NE=335422889",
						"monthEnergy": "9736.30",
						"yearEnergy": "194444.72",
						"installedCapacity": "366.3000",
						"installedCapacityUnit": "kWp",
						"runningStartTime": "2023-04-04 14:34:21",
						"stationRunningDays": 462
					}
				] */
				this.httpGet({
					url: this.$apis.apiStationList
				}).then(res => {
					this.stations = res
					if (this.curStatus) {
						this.stations = this.stations.filter(x => {
							return x.realKpi && x.realKpi.real_health_state === this.curStatus
						})
					}
					this.stations = this.stations.map(x => {
						if (x.realKpi) {
							x.dayIncome = this.tranceWan(x.realKpi.day_income, "元")
							x.totalIncome = this.tranceWan(x.realKpi.total_income, "元")
							x.dayPower = this.tranceWan(x.realKpi.day_power)
							x.monthPower = this.tranceWan(x.realKpi.month_power)
							x.totalPower = this.tranceWan(x.realKpi.total_power)
						}
						return x
					})
				})
			},
			toDetail(row) {
				this.mxNavigateTo(`/pages/index/detail?plantCode=` + encodeURIComponent(row.plantCode))
			},
			switchStatus(status) {
				this.curStatus = status || 0
				this.getStations()
			},
			switchType(type) {
				this.type = type || 1
			},
			getPickerDate(event) {
				let { value } = event.detail
				this.selectDate = value
				this.getDayKpiDatas()
			},
			tranceWan(num, uint) {
				let item = {
					number: num || 0,
					unit: uint || "度"
				}
				if (num > 10000) {
					item.number = num / 10000
					item.number = item.number.toFixed(2)
					item.unit = "万" + item.unit
				}
				return item
			}
		}
	}
</script>

<style lang="scss">
	.page-index {
		padding-top: 50px;
		height: 100%;
		background-image: linear-gradient(180deg, #d6f9fe, #f4f8fb);
	}
	.switch-titles {
		display: flex;
		align-items: flex-end;
		.item {
			float: left;
			margin-left: 20px;
			font-size: $uni-font-size-base + 5rpx;
			vertical-align: text-bottom;
		}
		.actived {
			font-weight: bold;
			font-size: $uni-font-size-base + 10rpx;
		}
	}
	.state-cards {
		display: flex;
		justify-items: space-between;
		margin-top: 20rpx;
		padding: 20rpx;
		.item {
			flex: 1;
			margin: 0 auto;
			padding: 30rpx;
			max-width: calc(22% - 60rpx);
			background: #ffffff;
			border-radius: 20rpx;
			.image {
				padding: 6rpx;
				width: 36rpx;
				height: 36rpx;
				background: #d7fff9;
				border-radius: 6rpx;
				.uni-icons {
					font-size: 36rpx !important;
				}
			}
			.count {
				margin: 30rpx 0 10rpx;
				font-size: $uni-font-size-base + 5rpx;
				font-weight: bold;
			}
			.title {
				font-size: $uni-font-size-sm;
				color: #999;
			}
		}
		.actived {
			border: 2px solid #23c2aa;
		}
	}
	.power-stations {
		background: #ffffff;
		margin-top: 20rpx;
		border-radius: 20rpx;
		padding: 30rpx;
		min-height: 100rpx;
		.searchs {
			height: 80rpx;
			display: flex;
			align-items: center;
			.search-inputs {
				height: 100%;
				flex: 1;
				display: flex;
				align-items: center;
				background: rgba(244, 248, 251, 1);
				border-radius: 10rpx;
				.state {
					text-align: center;
					width: 100rpx;
				}
				input {
					margin-left: 20rpx;
					width: 100%;
				}
			}
			.search-btn {
				margin-left: 20rpx;
				width: 120rpx;
				height: 100%;
				line-height: 80rpx;
				background: #23c2aa;
				border-radius: 10rpx;
				text-align: center;
				color: #ffffff;
			}
		}
		.contents {
			margin: 20rpx auto;
			padding: 20rpx;
			min-height: 50rpx;
			border-radius: 10rpx;
			background-image: linear-gradient(90deg, #d6f9fe, #f4f8fb);
			.titles {
				display: flex;
				align-items: baseline;
				.title {
					flex: 1;
					font-size: $uni-font-size-base + 3rpx;
					font-weight: bold;
				}
				.state {
					margin-left: 20rpx;
					padding: 5rpx 10rpx;
					font-size: $uni-font-size-sm;
				}
				.primary {
					background: #b3d8ff;
					color: #409eff;
				}
				.success {
					background: #c2e7b0;
					color: #67c23a;
				}
				.warning {
					background: #f5dab1;
					color: #e6a23c;
				}
				.info {
					background: #d3d4d6;
					color: #909399;
				}
			}
			.address {
				margin: 20rpx 0 20rpx;
				font-size: $uni-font-size-base - 2rpx;
				color: #777;
			}
			.electricitys {
				padding: 20rpx 10rpx;
				display: flex;
				justify-content: space-between;
				background: #ffffff;
				border-radius: 10rpx;
				.item {
					flex: 1;
					text-align: center;
					.desc {
						font-size: $uni-font-size-base - 5rpx;
						font-weight: normal;
						color: #999;
					}
					.value {
						font-size: $uni-font-size-base + 5rpx;
						font-weight: bold;
						line-height: 2;
					}
				}
			}
		}
		.nodata {
			color: #999;
			height: 180rpx;
			line-height: 180rpx;
			text-align: center;
		}
	}
	.statistics {
		margin-top: 20rpx;
		padding: 30rpx 30rpx 0;
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		.item {
			flex: 1;
			margin-bottom: 20rpx;
			padding: 30rpx;
			min-width: calc(48% - 55rpx);
			max-width: calc(48% - 55rpx);
			background: #ffffff;
			border-radius: 20rpx;
			.infos {
				display: flex;
				justify-content: space-between;
				.title {
					color: #999;
				}
				.image {
					width: 40rpx;
					height: 40rpx;
					border-radius: 6rpx;
				}
				.b1 {
					background: #f5dab1;
					color: #e6a23c;
				}
				.b2 {
					background: #c2e7b0;
					color: #67c23a;
				}
				.b3 {
					background: #b3d8ff;
					color: #409eff;
				}
				.b4 {
					background: #7bf7b7;
					color: #67c23a;
				}
				.b5 {
					background: #ffaa00;
					color: #ffaa00;
				}
			}
			.desc {
				margin-top: 25rpx;
				.value {
					font-size: $uni-font-size-base + 10rpx;
					font-weight: bold;
				}
				.unit {
					margin-left: 15rpx;
					color: #999;
				}
			}
		}
		.maxitem {
			padding: 40rpx 30rpx;
			min-width: calc(100% - 55rpx);
			max-width: calc(100% - 55rpx);
		}
	}
	.echarts {
		margin: 0 30rpx;
		padding: 30rpx 30rpx 1000rpx;
		background: #ffffff;
		border-radius: 20rpx;
		.titles {
			display: flex;
			justify-content: space-between;
			align-items: center;
			.date {
				display: flex;
				font-size: $uni-font-size-base + 3rpx;
				font-weight: bold;
				.uni-icons {
					margin-left: 15rpx;
				}
			}
			.info {
				color: #999;
				.value {
					margin-right: 10rpx;
					color: #000;
					font-size: $uni-font-size-base + 5rpx;
					font-weight: bold;
				}
			}
		}
		.echart {
			position: relative;
			width: 100%;
			height: 420rpx;
		}
	}
</style>